<template>
<div id="users">
    <el-button @click="btnStatus=true;dialogVisible=true;dialogTitle='添加'" type="primary" size="mini" icon="el-icon-plus">添加班级</el-button>
    <el-table :data="tableData">
        <el-table-column prop="classname" label="班级名">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column prop="" label="操作">
            <div slot-scope="{row}">
                <el-button-group>
                    <el-button type="primary" round size="mini" @click="editUser(row)">编辑</el-button>
                    <el-button type="danger" round size="mini" @click="delUser(row.id)">删除</el-button>
                </el-button-group>
            </div>
        </el-table-column>
    </el-table>
    <div style="margin:20px auto;text-align: center;">
        <el-pagination :current-page.sync="currentpage" :page-size="pagesize" :total="total" @current-change="getUserList" background layout="prev,pager,next,total">
        </el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible"  @close="dialogClose">
        <el-form ref="formLogin" label-position="left" :model="formClassData" :rules="rules" label-width="80px">
            <el-form-item label="班级名" prop="classname">
                <el-input v-model="formClassData.classname"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-input v-model="formClassData.status"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="text" @click="dialogVisible=false">取 消</el-button>
            <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusAdd" v-show="btnStatus">确 定</el-button>
            <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusEdit" v-show="!btnStatus">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        let validUsername = (rule, value, callback) => {
            let regx = /^\d{3,4}$/;
            if (!regx.test(value)) {
                callback(new Error("班级名应为3-4位的数字"));
            } else {
                callback();
            }
        };
        let isexistname = (rule, value, callback) => {
            this.$http.get(`/classes/isexist?fieldname=classname&fieldvalue=${value}`).then(result => {
                if (result.data.error == 1 && value !== this.oldvalue.username) {
                    callback(new Error('班级名已存在'))
                } else {
                    callback()
                }
            })
        }
        return {
            tableData: [],
            total: 0,
            pagesize: 4,
            currentpage: 1,
            formClassData: {
                classname: "",
                status: "",
            },
            oldvalue: {},
            buttonOkIcon: "",
            btnStatus: true,
            buttonDisabled: false,
            dialogTitle: "",
            dialogVisible: false,
            menusList: [],
            rules: {
                classname: [{
                        validator: validUsername,
                        trigger: "change"
                    },
                    {
                        validator: isexistname,
                        trigger: "change"
                    }
                ],
            }
        };
    },
    created() {
        this.getUserList();
    },
    methods: {
        getUserList() {
            this.$http
                .get(
                    `/classes/list?pagesize=${this.pagesize}&currentpage=${
            this.currentpage
          }`
                )
                .then(result => {
                    this.total = result.data.total;
                    this.tableData = result.data.data;
                });
        },
        dialogClose() {
            this.$refs.formLogin.resetFields();
        },
        menusAdd() {
            this.$refs.formLogin.validate(pass => {
                if (!pass) return;
                this.buttonOkIcon = "el-icon-loading";
                this.buttonDisabled = true;

                this.$http
                    .post("/classes/add", this.$qs.stringify(this.formClassData))
                    .then(result => {
                        this.buttonOkIcon = "";
                        this.buttonDisabled = false;
                        this.getUserList();
                        this.dialogVisible = false;
                    });
            });
        },
        menusEdit() {
            this.$refs.formLogin.validate(valid => {
                if (!valid) {
                    return;
                }
                this.$http
                    .post("/classes/edit", this.$qs.stringify(this.formClassData))
                    .then(result => {
                        this.dialogVisible = false;
                        this.getUserList();
                    });
            });
        },
        editUser(row) {
            this.btnStatus = false;
            this.dialogVisible = true;
            this.dialogTitle = "编辑";
            this.formClassData.classname = row.classname;
            this.formClassData.status = row.status;
            this.$set(this.formClassData, "id", row.id);
            this.oldvalue = row;
            console.log(row.classname)
            console.log(this.formClassData)
        },
        deleteUser(id) {
            this.$http.get(`/classes/delete?id=${id}`).then(result => {
                this.getUserList();
            });
        },
        delUser(id) {
            this.$confirm("此操作将永久删除该班级, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.deleteUser(id);
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
    }
};
</script>

<style>

</style>
